<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询用户信息</legend>
</fieldset>
<form action="" class="layui-form" id="form-admin">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="text_align:center;">用户名</label>
            <div class="layui-input-inline">
<!--                <input type="hidden" name="op" value="add" autocomplete="off" class="layui-input">-->
                <input class="layui-input" lay-verify="uname" name="uname" type="text" autocomplete="off">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" style="text_align:center;">邮箱</label>
            <div class="layui-input-inline">
                <input class="layui-input" lay-verify="myVerify" name="uemail" type="email" autocomplete="off">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input class="layui-input" lay-verify="myVerify" name="utel" type="tel" autocomplete="off">
            </div>
        </div>


        <div class="layui-inline">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="finds" lay-submit="" type="submit" id="finds">查询</button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                <button class="layui-btn" lay-filter="findall" lay-submit="" type="submit" id="findall">浏览全部</button>
            </div>
        </div>
    </div>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="update">修改状态</a>
</script>
<script charset="utf-8" src="../layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/ajax.js"></script>
<script>
	layui.use(function () {
		var table = layui.table,
				form = layui.form,
				$ = layui.jquery;
        // 在文件底部执行 layui 的 form 模块
        layui.use('form', function(){
            var form = layui.form;

            // 监听 "findall" 按钮的点击事件
            // form.on('submit(findall)', function() {
                layui.jquery.ajax({
                    url: "../../user?op=findall",
                    type: "GET",
                    dataType: "json",
                    success: function (res) {
                        table.render({
                            elem: '#test',
                            title: '用户数据表',
                            cols: [[
                                {type: 'checkbox', fixed: 'left'}
                                , {field: 'uno', title: 'ID', width: 80, unresize: true, sort: true}
                                , {field: 'uname', title: '用户名', edit: 'text'}
                                , {
                                    field: 'utel', width: 200, title: '手机号', edit: 'text', templet: function (res) {
                                        return '<em>' + res.utel + '</em>'
                                    }
                                }
                                , {field: 'usex', title: '性别', edit: 'text', sort: true}
                                , {field: 'uemail', title: '电子邮箱', edit: 'text'}
                                , {field: 'balance', title: '余额', edit: 'text'}
                                , {field: 'love', title: '爱好', edit: 'text'}
                                , {
                                    field: 'ustate', title: '状态', edit: 'text', templet: function (res) {
                                        if (res.ustate == 1) {
                                            return "<span style='color:green'>正常</span>";
                                        } else {
                                            return "<span style='color:gainsboro'>冻结</span>";
                                        }
                                    }
                                }
                                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
                            ]],
                            data: res.data,
                            count: res.data.length,
                            page: {
                                limit: 10, // 每页显示的数据量
                                limits: [10, 20, 30], // 可选的数据量选项
                            },
                        });
                    }
                });

                // 返回 false 以防止表单提交
                return false;
            });
        // });


        layui.use('form', function(){
            var form = layui.form;

            // 监听 "findall" 按钮的点击事件
            form.on('submit(finds)', function(data) {
                var uname = data.field.uname;
                var uemail = data.field.uemail;
                var utel = data.field.utel;


                layui.jquery.ajax({
                    url: "../../user?op=finds",
                    type: "GET",
                    data:{
                        uname: uname,
                        uemail: uemail,
                        utel: utel
                    },
                    dataType: "json",
                    success: function (res) {
                        table.render({
                            elem: '#test',
                            title: '用户数据表',
                            cols: [[
                                {type: 'checkbox', fixed: 'left'}
                                , {field: 'uno', title: 'ID', width: 80, unresize: true, sort: true}
                                , {field: 'uname', title: '用户名', edit: 'text'}
                                , {
                                    field: 'utel', width: 200, title: '手机号', edit: 'text', templet: function (res) {
                                        return '<em>' + res.utel + '</em>'
                                    }
                                }
                                , {field: 'usex', title: '性别', edit: 'text', sort: true}
                                , {field: 'uemail', title: '电子邮箱', edit: 'text'}
                                , {field: 'balance', title: '余额', edit: 'text'}
                                , {field: 'love', title: '爱好', edit: 'text'}
                                , {
                                    field: 'ustate', title: '状态', edit: 'text', templet: function (res) {
                                        if (res.ustate == 1) {
                                            return "<span style='color:green'>正常</span>";
                                        } else {
                                            return "<span style='color:gainsboro'>冻结</span>";
                                        }
                                    }
                                }
                                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
                            ]],
                            data: res.data,
                            count: res.data.length,
                            page: {
                                limit: 10, // 每页显示的数据量
                                limits: [10, 20, 30], // 可选的数据量选项
                            },
                        });
                    }
                });

                // 返回 false 以防止表单提交
                return false;
            });
        });


        table.on('tool(test)', function(obj) {
            var data = obj.data;

            if (obj.event === 'update') {
                var timestamp = new Date().getTime();  // 获取当前时间戳
                $.get("../../user?op=update", {
                    uno: data.uno,
                    ustate: data.ustate,
                    timestamp: timestamp  // 将时间戳作为参数添加到请求中
                }, function(rs) {
                    if (rs === 1) {
                        // 刷新当前表格数据
                        location.reload();  // 刷新页面
                        // 提示更新成功
                        layer.msg('更新成功');
                    } else {
                        layer.msg(rs.msg);
                    }
                }, 'json');
            }
        });


        // 自定义验证规则函数
        layui.form.verify({
            myVerify: function(value, item) {
                // 判断是否为邮箱或手机号
                if (item.getAttribute("name") === "uemail") {
                    if (value.trim().length == 0) {
                        return;
                    } else if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g.test(value.trim())) {
                        return '请输入正确的邮箱地址';
                    }
                } else if (item.getAttribute("name") === "utel") {
                    if (value.trim().length == 0) {
                        return;
                    } else if (!/^1[3456789]\d{9}$/g.test(value.trim())) {
                        return '请输入正确的手机号码';
                    }
                }
            }
        });





	});
</script>
</body>
</html>
